<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-15 10:51:43
 * @LastEditTime: 2024-02-04 10:41:37
-->
<script lang="ts" setup name="ManageParams">
import type { Ref } from 'vue'
import { useFields } from './fields'
import { datasourceApi } from '@/MainApp/apis/datasource'
const DatasourceModal = defineAsyncComponent(
  () => import('./DatasourceModal.vue')
)
const { t } = useConfig()
const { msgBoxWarnAsync, msgSuccess, msgError } = useMessage()

// 新增、修改
const editData: Ref<typeof formKey | null> = ref(null)
const visible = ref(false)
const formKey = {
  name: '',
  type: '',
  ip: '',
  port: '',
  username: '',
  password: '',
  schemaName: '',
  remark: '',
  driverClassName: ''
}
const datasourceData = ref([])
const loading = ref(false)
const tadaTotal = ref(0)
const pageData = ref()
const databaseType = ref<any>([])
const { fieldList } = useFields(databaseType.value)

const queryDatasource = async () => {
  loading.value = true
  const param = {
    ...pageData.value
  }
  const { success, data, total, msg } = await datasourceApi.getDatasourceList(
    param
  )
  loading.value = false

  if (success) {
    datasourceData.value = success ? data : []

    tadaTotal.value = total
  }
  else {
    msgError(msg)
  }
}
// 新增
const handAddDatasource = () => {
  editData.value = null
  visible.value = true
}
// 修改
const handEditRow = (row: typeof formKey) => {
  editData.value = { ...row }
  visible.value = true
}
// 删除
const handDelete = (row: typeof formKey & { id: string; }) => {
  msgBoxWarnAsync('确认删除', `确认删除数据源[ ${row.name} ]吗?`, async () => {
    const { msg, success } = await datasourceApi.deleteDatasource(row.id)
    if (success) {
      queryDatasource()
      msgSuccess(msg)
    }
    else {
      msgError(msg)
    }
  })
}

const getDatabase = async () => {
  databaseType.value = [
    { label: 'MYSQL', name: 'MYSQL' },
    { label: 'Postgres', name: 'POSTGRES' },
    { label: 'Oracle', name: 'ORACLE' },
    { label: 'SQLServer', name: 'MSSQL_SERVER' }
  ]

  fieldList.value = fieldList.value.map(item => {
    if (item.key === 'type') {
      return {
        ...item,
        options: databaseType.value
      }
    }
    return {
      ...item
    }
  })
}
getDatabase()
</script>

<template>
  <IkPageMain fixed>
    <IkPageFull
      v-model="pageData"
      header-title="数据源列表"
      :fields="fieldList"
      :table-data="datasourceData"
      :total="tadaTotal"
      :loading="loading"
      :search="queryDatasource"
    >
      <!-- 搜索slot -->
      <template #headerRight>
        <el-button
          v-role="'$ADD-DATASOURCE'"
          type="primary"
          @click="handAddDatasource"
        >
          {{ t("action.add") }}
        </el-button>
      </template>
      <template #operate="{ data }">
        <IkBtnContent :num="2">
          <IkSvgIcon
            v-role="'UPDATE-DATASOURCE'"
            name="iksvg_bianji"
            show-bg
            pop
            :start-margin="false"
            :title="t('action.modify')"
            @click="handEditRow(data.row)"
          />
          <IkSvgIcon
            v-role="'DELETE-DATASOURCE'"
            name="iksvg_shanchu1"
            show-bg
            pop
            :title="t('action.delete')"
            @click="handDelete(data.row)"
          />
        </IkBtnContent>
      </template>
    </IkPageFull>
    <DatasourceModal
      v-model:visible="visible"
      :form-key="formKey"
      :edit-data="editData!"
      @dataChange="queryDatasource"
    />
  </IkPageMain>
</template>
